<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>滑动切换的注册登录界面</title>
  <link rel="stylesheet" href="./css/loginRegister.css">
</head>

<body>
  <div class="container">
    <div class="form-box">
      <!-- 注册 -->
      <form action="register" method="get" class="register-box hidden">
        <h1>register</h1>
        <input type="text" placeholder="用户名" name="username" required>
       <input type="text" id="phone" name="phone" placeholder="请输入电话" pattern="^1[3-9]\d{9}$" title="手机号为标准的11位" required>
        <input type="email" placeholder="邮箱" name="email"required>
        <input type="password" placeholder="密码" name="password"required pattern="^[a-zA-Z0-9]{6,10}$" title="密码必须包含至少一个数字和一个字母，且至少6位" >
        <input type="password" placeholder="确认密码" name="confirmPassword"required pattern="^[a-zA-Z0-9]{6,10}$" title="密码必须包含至少一个数字和一个字母，且至少6位" >
        <button id="registerBtn">注册</button>
      </form>
      <!-- 登录 -->
      <form class="login-box" action="login" method="post" >
        <h1>login</h1>
        <input type="text" placeholder="用户名" name='username2'required>
        <input type="password" placeholder="密码" name='password2' required>
        <button>登录</button>
      </form>
    </div>
    <div class="con-box left">
      <h2>欢迎来到<span>运动之家</span></h2>
      <p>快来看看你的<span>专属健身服务<span>吧</p>
      <img src="./img/1.png" alt="">
      <p>已有账号</p>
      <div class="btn"> 
        <button id="login">去登录</button>
       <button id="houtai">去后台</button>
      </div>
    
    </div>
    <div class="con-box right">
      <h2>欢迎来到<span>运动之家</span></h2>
    <p>快来看看你的<span>专属健身服务<span>吧</p>
      <img src="./img/2.png" alt="">
      <p>没有账号？</p>
      <button id="register">去注册</button>
    </div>
  </div>
  <script>
/*   将页面从登录框切换到注册框 */
    function switchToRegister() {
      let form_box = document.getElementsByClassName('form-box')[0];
      let register_box = document.getElementsByClassName('register-box')[0];
      let login_box = document.getElementsByClassName('login-box')[0];
   /*    向右平移 */
      form_box.style.transform = 'translateX(80%)';
      login_box.classList.add('hidden');
      register_box.classList.remove('hidden');
    }
  /*  将页面切换到登录*/
    function switchToLogin() {
      let form_box = document.getElementsByClassName('form-box')[0];
      let register_box = document.getElementsByClassName('register-box')[0];
      let login_box = document.getElementsByClassName('login-box')[0];
      
      form_box.style.transform = 'translateX(0%)';
      register_box.classList.add('hidden');
      login_box.classList.remove('hidden');
    }
  
    let usernameInput = document.querySelector('.register-box input[name="username"]');
    let phoneInput = document.querySelector('.register-box input[name="phone"]');
    let emailInput = document.querySelector('.register-box input[name="email"]');
    let passwordInput = document.querySelector('.register-box input[name="password"]');
    let confirmPasswordInput = document.querySelector('.register-box input[name="confirmPassword"]');
  
  
   
    
    let loginBtn = document.getElementById('login');
    let registerBtn = document.getElementById('register');
    let houtaiBtn=document.getElementById('houtai');
    let registerSubmitBtn = document.getElementById('registerBtn');
  
    loginBtn.addEventListener('click', switchToLogin);
    registerBtn.addEventListener('click', switchToRegister);
    houtaiBtn.addEventListener('click', function() {
        window.location.href = './adminLogin.jsp';
    })
  
    registerSubmitBtn.addEventListener('click', function(event) {
  	  if (passwordInput.value!==confirmPasswordInput.value) {
  		event.preventDefault();
  		alert("密码不一致")
  	  } 
  	})

  </script>
</body>

</html>
